
<!DOCTYPE html>
<html>
<!--<head>-->
<!--    <title>可能很聪明</title>-->
<!--    <style>-->
<!--        html{-->
<!--            font-family: Arial, sans-serif;-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            height: 88%;-->
<!--            width: 100%;-->
<!--            display: flex;-->
<!--            flex-direction: column;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--            background-color: #f5f5f5;-->
<!--        }-->
<!--        body {-->
<!--            font-family: Arial, sans-serif;-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            height: 100%;-->
<!--            width: 100%;-->
<!--            display: flex;-->
<!--            flex-direction: column;-->
<!--            justify-content: center;-->
<!--            align-items: center;-->
<!--            background-color: #f5f5f5;-->
<!--        }-->

<!--        h1 {-->
<!--            text-align: center;-->
<!--            margin-bottom: 30px;-->
<!--        }-->

<!--        .container {-->
<!--            width: 100%;-->
<!--            height: 80%;-->
<!--            max-width: 800px;-->
<!--            background-color: #fff;-->
<!--            border-radius: 5px;-->
<!--            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);-->
<!--            padding: 20px;-->
<!--        }-->

<!--        .nav-container {-->
<!--            background-color: #343a40;-->
<!--            border-radius: 5px;-->
<!--            color: #fff;-->
<!--            padding: 10px;-->
<!--            width: 200px;-->
<!--            margin-right: 10px;-->
<!--            display: flex;-->
<!--            flex-direction: column;-->
<!--            align-items: center;-->
<!--        }-->

<!--        .nav-container h3 {-->
<!--            margin: 0;-->
<!--            margin-bottom: 20px;-->
<!--        }-->

<!--        .toggle-button {-->
<!--            background-color: transparent;-->
<!--            border: none;-->
<!--            color: #fff;-->
<!--            font-size: 20px;-->
<!--            cursor: pointer;-->
<!--            margin-bottom: 20px;-->
<!--        }-->

<!--        .chat-container {-->
<!--            margin-top: 295px;-->
<!--            flex-grow: 1;-->
<!--            background-color: #f5f5f5;-->
<!--            border-radius: 5px;-->
<!--            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);-->
<!--            display: flex;-->
<!--            flex-direction: column;-->
<!--            padding: 20px;-->
<!--        }-->

<!--        .message-log {-->
<!--            flex-grow: 1;-->
<!--            margin-bottom: 10px;-->
<!--            overflow-y: auto;-->
<!--        }-->

<!--        .user-message {-->
<!--            text-align: right;-->
<!--            color: #007bff;-->
<!--        }-->

<!--        .bot-message {-->
<!--            text-align: left;-->
<!--            color: #dc3545;-->
<!--        }-->

<!--        .message-text {-->
<!--            display: inline-block;-->
<!--            padding: 10px;-->
<!--            border-radius: 5px;-->
<!--        }-->

<!--        .user-message .message-text {-->
<!--            background-color: #c3e6cb;-->
<!--            color: #155724;-->
<!--        }-->

<!--        .bot-message .message-text {-->
<!--            background-color: #fff;-->
<!--            color: #000;-->
<!--        }-->

<!--        .input-container {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            margin-top: 10px;-->
<!--        }-->

<!--        input[type="text"] {-->
<!--            flex-grow: 1;-->
<!--            padding: 10px;-->
<!--            border: none;-->
<!--            border-radius: 5px;-->
<!--        }-->

<!--        .send-button {-->
<!--            padding: 10px 20px;-->
<!--            background-color: #4CAF50;-->
<!--            color: #fff;-->
<!--            border: none;-->
<!--            border-radius: 5px;-->
<!--            cursor: pointer;-->
<!--            margin-left: 10px;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<h1>大聪明</h1>-->
<!--<div class="container">-->
<!--    <div class="nav-container">-->
<!--        <h3>Chat Log</h3>-->
<!--        <button class="toggle-button" onclick="toggleNewConversation()">+</button>-->
<!--    </div>-->
<!--    <div class="chat-container">-->
<!--        <div class="message-log" id="chat-log"></div>-->
<!--        <div class="input-container">-->
<!--            <input type="text" class="form-control" id="message-input">-->
<!--            <button class="send-button" onclick="sendMessage()">Send</button>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="chat-container" id="new-conversation" style="display: none">-->
<!--        &lt;!&ndash; Content of the new conversation goes here &ndash;&gt;-->
<!--    </div>-->
<!--</div>-->

<!-- Your JavaScript code here -->



<!-- Your JavaScript code here -->


<head>
    <title>可能很聪明</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        h1 {
            text-align: center;
        }

        .chat-container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: #f5f5f5;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            height: 80vh;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            padding: 20px;
        }

        .message-log {
            flex-grow: 1;
            margin-bottom: 10px;
        }

        .user-message {
            text-align: right;
            color: #007bff;
        }

        .bot-message {
            text-align: left;
            color: #dc3545;
        }

        .message-text {
            display: inline-block;
            padding: 10px;
            border-radius: 5px;
        }

        .user-message .message-text {
            background-color: #007bff;
            color: #fff;
        }

        .bot-message .message-text {
            background-color: #dc3545;
            color: #fff;
        }

        .input-container {
            display: flex;
            align-items: center;
            margin-top: 10px;
        }

        input[type="text"] {
            flex-grow: 1;
            padding: 10px;
            border: none;
            border-radius: 5px;
        }

        .send-button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<h1>大聪明</h1>
<div class="container">
    <div class="chat-container">
        <input type="hidden" id="context-input" value="">
        <div class="message-log" id="chat-log"></div>
        <div class="input-container">
            <input type="text" class="form-control" id="message-input">

            <button class="btn btn-primary send-button" onclick="sendMessage()">Send</button>
        </div>
    </div>
</div>

<script>
    // function sendMessage() {
    //     var message = document.getElementById("message-input").value;
    //     if (message.trim() !== "") {
    //         var chatLog = document.getElementById("chat-log");
    //
    //         // 创建用户消息元素
    //         var userMessageContainer = document.createElement("div");
    //         userMessageContainer.className = "user-message";
    //         var userMessageText = document.createElement("p");
    //         userMessageText.className = "message-text";
    //         userMessageText.innerHTML = message;
    //         userMessageContainer.appendChild(userMessageText);
    //         chatLog.appendChild(userMessageContainer);
    //
    //         document.getElementById("message-input").value = "";
    //
    //         // 发送异步请求
    //         var xhr = new XMLHttpRequest();
    //         xhr.open("POST", "/chat/chat", true);
    //         xhr.setRequestHeader("Content-Type", "text/plain");
    //         xhr.onreadystatechange = function() {
    //             if (xhr.readyState === 4 && xhr.status === 200) {
    //                 var botMessageContainer = document.createElement("div");
    //                 botMessageContainer.className = "bot-message";
    //                 var botMessageText = document.createElement("p");
    //                 botMessageText.className = "message-text";
    //
    //                 var response = JSON.parse(xhr.responseText);
    //                 var content = response.data.message.content;
    //
    //                 botMessageText.innerHTML = "ChatGPT: " + content;
    //                 botMessageContainer.appendChild(botMessageText);
    //                 chatLog.appendChild(botMessageContainer);
    //             }
    //         };
    //         xhr.send(message);
    //
    //         // 将聊天框滚动到底部
    //         chatLog.scrollTop = chatLog.scrollHeight;
    //     }
    // }
    // function sendMessage() {
    //     var message = document.getElementById("message-input").value;
    //     if (message.trim() !== "") {
    //         var chatLog = document.getElementById("chat-log");
    //
    //         // 创建用户消息元素
    //         var userMessageContainer = document.createElement("div");
    //         userMessageContainer.className = "user-message";
    //         var userMessageText = document.createElement("p");
    //         userMessageText.className = "message-text";
    //         userMessageText.innerHTML = message;
    //         userMessageContainer.appendChild(userMessageText);
    //         chatLog.appendChild(userMessageContainer);
    //
    //         document.getElementById("message-input").value = "";
    //
    //         // 发送异步请求
    //         var xhr = new XMLHttpRequest();
    //         xhr.open("POST", "/chat/chat", true);
    //         xhr.setRequestHeader("Content-Type", "text/plain");
    //         xhr.onreadystatechange = function() {
    //             if (xhr.readyState === 4 && xhr.status === 200) {
    //                 var botMessageContainer = document.createElement("div");
    //                 botMessageContainer.className = "bot-message";
    //                 var botMessageText = document.createElement("p");
    //                 botMessageText.className = "message-text";
    //
    //                 var response = JSON.parse(xhr.responseText);
    //                 var content = response.data.text;
    //
    //                 botMessageText.innerHTML = "ChatGPT: " + content;
    //                 botMessageContainer.appendChild(botMessageText);
    //                 chatLog.appendChild(botMessageContainer);
    //
    //                 // 更新上下文
    //                 var context = response.data.context;
    //                 document.getElementById("context-input").value = context;
    //             }
    //         };
    //
    //         // 将上下文添加到请求中
    //         var context = document.getElementById("context-input").value;
    //         xhr.setRequestHeader("X-ChatGPT-Context", context);
    //
    //         xhr.send(message);
    //
    //         // 将聊天框滚动到底部
    //         chatLog.scrollTop = chatLog.scrollHeight;
    //     } else {
    //         alert("请输入消息内容");
    //     }
    // }
    // function sendMessage() {
    //     var message = document.getElementById("message-input").value;
    //     if (message.trim() !== "") {
    //         var chatLog = document.getElementById("chat-log");
    //
    //         // 创建用户消息元素
    //         var userMessageContainer = document.createElement("div");
    //         userMessageContainer.className = "user-message";
    //         var userMessageText = document.createElement("p");
    //         userMessageText.className = "message-text";
    //         userMessageText.innerHTML = message;
    //         userMessageContainer.appendChild(userMessageText);
    //         chatLog.appendChild(userMessageContainer);
    //
    //         document.getElementById("message-input").value = "";
    //
    //         // 发送异步请求
    //         var xhr = new XMLHttpRequest();
    //         xhr.open("POST", "/chat/chat", true);
    //         xhr.setRequestHeader("Content-Type", "text/plain");
    //         xhr.onreadystatechange = function() {
    //             if (xhr.readyState === 4 && xhr.status === 200) {
    //                 var botMessageContainer = document.createElement("div");
    //                 botMessageContainer.className = "bot-message";
    //                 var botMessageText = document.createElement("p");
    //                 botMessageText.className = "message-text";
    //
    //                 var response = JSON.parse(xhr.responseText);
    //                 var content = response.data.text;
    //
    //                 // 解析上下文响应
    //                 var contextResponse = xhr.getResponseHeader("X-ChatGPT-Context");
    //                 var context = contextResponse ? contextResponse.split("::")[1] : "";
    //
    //                 botMessageText.innerHTML = "ChatGPT: " + content;
    //                 botMessageContainer.appendChild(botMessageText);
    //                 chatLog.appendChild(botMessageContainer);
    //
    //                 // 更新上下文
    //                 document.getElementById("context-input").value = context;
    //             }
    //         };
    //
    //         // 将上下文添加到请求中
    //         var context = document.getElementById("context-input").value;
    //         xhr.setRequestHeader("X-ChatGPT-Context", context);
    //
    //         xhr.send(message);
    //
    //         // 将聊天框滚动到底部
    //         chatLog.scrollTop = chatLog.scrollHeight;
    //     } else {
    //         alert("请输入消息内容");
    //     }
    // }
    function sendMessage() {
        var message = document.getElementById("message-input").value;
        if (message.trim() !== "") {
            var chatLog = document.getElementById("chat-log");

            // 创建用户消息元素
            var userMessageContainer = document.createElement("div");
            userMessageContainer.className = "user-message";
            var userMessageText = document.createElement("p");
            userMessageText.className = "message-text";
            userMessageText.innerHTML = message;
            userMessageContainer.appendChild(userMessageText);
            chatLog.appendChild(userMessageContainer);

            document.getElementById("message-input").value = "";

            // 发送异步请求
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/chat/chat", true);
            xhr.setRequestHeader("Content-Type", "text/plain");
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var botMessageContainer = document.createElement("div");
                    botMessageContainer.className = "bot-message";
                    var botMessageText = document.createElement("p");
                    botMessageText.className = "message-text";

                    var response = JSON.parse(xhr.responseText);
                    var content = response.data.text;

                    // 去除上一句用户消息
                    var lastUserMessage = getLastUserMessage();
                    if (lastUserMessage !== null) {
                        content = content.replace(lastUserMessage, "");
                    }

                    botMessageText.innerHTML = "ChatGPT: " + content;
                    botMessageContainer.appendChild(botMessageText);
                    chatLog.appendChild(botMessageContainer);

                    // 更新上下文
                    var context = response.data.context;
                    document.getElementById("context-input").value = context;
                }
            };

            // 将上下文添加到请求中
            var context = document.getElementById("context-input").value;
            xhr.setRequestHeader("X-ChatGPT-Context", context);

            xhr.send(message);

            // 将聊天框滚动到底部
            chatLog.scrollTop = chatLog.scrollHeight;
        } else {
            alert("请输入消息内容");
        }
    }

    function getLastUserMessage() {
        var chatLog = document.getElementById("chat-log");
        var userMessages = chatLog.getElementsByClassName("user-message");
        if (userMessages.length > 0) {
            var lastUserMessage = userMessages[userMessages.length - 1];
            return lastUserMessage.getElementsByClassName("message-text")[0].innerHTML;
        }
        return null;
    }


</script>
</body>
</html>


